{% extends 'admin/base.html' %}

{% block title %}批量导入自行车 - 管理后台{% endblock %}
{% block page_title %}批量导入自行车{% endblock %}

{% block content %}
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0">
                    <i class="bi bi-upload"></i> 批量导入自行车
                </h5>
            </div>
            <div class="card-body">
                <!-- 导入说明 -->
                <div class="alert alert-info">
                    <h6><i class="bi bi-info-circle"></i> 导入说明</h6>
                    <ul class="mb-0">
                        <li>请先下载Excel模板，按照模板格式填写数据</li>
                        <li>必填字段：自行车编号、所有人姓名、学号、学院、类别、型号、颜色</li>
                        <li>学院代码请参考模板中的说明</li>
                        <li>自行车编号不能重复</li>
                        <li><strong>图片导入：</strong>将图片文件打包成ZIP格式上传，图片文件名要与Excel中的"图片文件名"列对应</li>
                        {% if not is_super_admin %}
                        <li class="text-warning">您只能导入本学院（{{ college_user.get_college_display }}）的数据</li>
                        {% endif %}
                    </ul>
                </div>

                <!-- 操作按钮 -->
                <div class="row mb-4">
                    <div class="col-md-6">
                        <a href="{% url 'bike:bike_import_template' %}" class="btn btn-success">
                            <i class="bi bi-download"></i> 下载Excel模板
                        </a>
                    </div>
                    <div class="col-md-6 text-end">
                        <a href="{% url 'bike:admin_bike_list' %}" class="btn btn-secondary">
                            <i class="bi bi-arrow-left"></i> 返回自行车管理
                        </a>
                    </div>
                </div>

                <!-- 导入表单 -->
                <form method="post" enctype="multipart/form-data">
                    {% csrf_token %}
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="excel_file" class="form-label">选择Excel文件 <span class="text-danger">*</span></label>
                                <input type="file" class="form-control" id="excel_file" name="excel_file" 
                                       accept=".xlsx,.xls" required>
                                <div class="form-text">支持 .xlsx 和 .xls 格式的Excel文件</div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="images_zip" class="form-label">选择图片ZIP文件 <span class="text-muted">(可选)</span></label>
                                <input type="file" class="form-control" id="images_zip" name="images_zip" 
                                       accept=".zip">
                                <div class="form-text">将图片文件打包成ZIP格式上传</div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12">
                            <div class="mb-3">
                                <button type="submit" class="btn btn-primary">
                                    <i class="bi bi-upload"></i> 开始导入
                                </button>
                                <a href="{% url 'bike:admin_bike_list' %}" class="btn btn-secondary ms-2">
                                    <i class="bi bi-arrow-left"></i> 返回自行车管理
                                </a>
                            </div>
                        </div>
                    </div>
                </form>

                <!-- 模板格式说明 -->
                <div class="card mt-4">
                    <div class="card-header">
                        <h6 class="card-title mb-0">
                            <i class="bi bi-table"></i> Excel模板格式说明
                        </h6>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-bordered table-sm">
                                <thead class="table-light">
                                    <tr>
                                        <th>字段名</th>
                                        <th>是否必填</th>
                                        <th>说明</th>
                                        <th>示例</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>自行车编号</td>
                                        <td><span class="badge bg-danger">必填</span></td>
                                        <td>唯一标识，不能重复</td>
                                        <td>CS0001</td>
                                    </tr>
                                    <tr>
                                        <td>所有人姓名</td>
                                        <td><span class="badge bg-danger">必填</span></td>
                                        <td>自行车所有人姓名</td>
                                        <td>张三</td>
                                    </tr>
                                    <tr>
                                        <td>学号</td>
                                        <td><span class="badge bg-danger">必填</span></td>
                                        <td>学生学号</td>
                                        <td>2021001</td>
                                    </tr>
                                    <tr>
                                        <td>学院</td>
                                        <td><span class="badge bg-danger">必填</span></td>
                                        <td>学院代码，参考模板说明</td>
                                        <td>computer</td>
                                    </tr>
                                    <tr>
                                        <td>类别</td>
                                        <td><span class="badge bg-danger">必填</span></td>
                                        <td>自行车类别代码，参考模板说明</td>
                                        <td>mountain</td>
                                    </tr>
                                    <tr>
                                        <td>型号</td>
                                        <td><span class="badge bg-danger">必填</span></td>
                                        <td>自行车型号</td>
                                        <td>山地车</td>
                                    </tr>
                                    <tr>
                                        <td>颜色</td>
                                        <td><span class="badge bg-danger">必填</span></td>
                                        <td>自行车颜色</td>
                                        <td>红色</td>
                                    </tr>
                                    <tr>
                                        <td>购买日期</td>
                                        <td><span class="badge bg-secondary">可选</span></td>
                                        <td>购买日期，格式：YYYY-MM-DD</td>
                                        <td>2024-01-01</td>
                                    </tr>
                                    <tr>
                                        <td>联系电话</td>
                                        <td><span class="badge bg-secondary">可选</span></td>
                                        <td>联系电话号码</td>
                                        <td>13800138000</td>
                                    </tr>
                                    <tr>
                                        <td>班级</td>
                                        <td><span class="badge bg-secondary">可选</span></td>
                                        <td>所在班级</td>
                                        <td>计算机1班</td>
                                    </tr>
                                    <tr>
                                        <td>备注</td>
                                        <td><span class="badge bg-secondary">可选</span></td>
                                        <td>其他备注信息</td>
                                        <td>示例数据</td>
                                    </tr>
                                    <tr>
                                        <td>图片文件名</td>
                                        <td><span class="badge bg-secondary">可选</span></td>
                                        <td>图片文件名（不含扩展名），需与ZIP包中的文件名对应</td>
                                        <td>CS0001</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}
